/*======== Importacion de componentes ========*/
@import url("components/reusable-content.css");
@import url("components/card-custom.css");
@import url("components/doc-list.css");
@import url("components/calendar.css");

/*======== Ajustes al core de Sharepoint ========*/
.ms-core-webpartadder {
  z-index: 1;
}
#sideNavBox {
  display: none;
}
.ms-srch-sb > .ms-srch-sb-navLink {
  height: 0;
}
#s4-titlerow {
  display: none !important;
}
#contentBox {
  margin: 0px;
  min-width: 100%;
}
.ms-webpart-zone {
  display: block !important;
}
.ms-webpart-zone .ms-webpart-cell-vertical {
  display: block !important;
}
#contentRow {
  padding: 0;
}
.ms-webpart-chrome-vertical {
  display: block !important;
}
.ms-siteactions-root > span > a.ms-core-menu-root {
  width: auto;
  height: auto;
}
#ms-help {
  span {
    height: 28px !important;
    width: 28px !important;
  }
}
li.dfwp-item {
  list-style-type: none;
}
.ms-webpartzone-cell {
  margin: 0px;
}
div.article,
div.welcome {
  padding: 0;
}
.article-content,
.welcome-content {
  margin: 0;
}
.slm-layout-main {
  overflow: initial;
}
a:hover,
a:active {
  text-decoration: none;
}
.ms-rteThemeForeColor-5-0 {
  color: #004884 !important;
}
.ms-rtestate-field p,
p.ms-rteElement-P {
  line-height: 1.5rem;
  font-size: 16px;
  margin: initial;
}
/*======== Banner de página ========*/
.bg-element-img {
  background-position: center;
  background-size: cover;
  background-color: white;
  background-image: url("https://www.minsalud.gov.co/ihce/PublishingImages/mini-banner.webp");
  min-height: 110px;
  display: flex;
  align-items: center;
}
.page-banner h1 {
  color: white;
  padding-left: 3rem;
  margin: 0;
  width: fit-content;
  position: relative;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.page-banner span {
  position: relative;
  padding-bottom: 5px;
}
.page-banner h1 span::before,
.page-banner h1 span::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 3px;
  position: absolute;
  bottom: 0;
}
.page-banner h1 span::before {
  background-color: #90c146;
  width: 48%;
}
.page-banner h1 span::after {
  background-color: #18aa9d;
  right: 0;
  width: 50%;
}
/*======== Bloque oculto para configuración de la página ========*/
.hide-block {
  display: none;
}
.hide-block img {
  max-width: 100%;
  min-height: 110px;
}
.hide-block .ms-formfieldcontainer {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 10px;
}
.hide-block .text-muted {
  color: var(--govcolor-grey);
  font-size: 14px;
  font-style: italic;
}

[data-js="hide-block"] img {
  max-width: initial;
  min-height: initial;
}
/*======== Detalle de eventos ========*/
[data-theme="DetalleEvento"] .contenedor img {
  margin: 0 auto;
  display: block;
  max-width: 100%;
}

[data-theme="DetalleEvento"] .contenedor a img {
  margin: 0 auto !important;
}

/*======== Videos ========*/
.videos-container iframe {
  max-width: 100%;
  height: initial;
}

/*======== Modal popup Event ========*/
#popupEvent .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  opacity: 1;
  border-radius: 0;
  padding: 0.4rem;
  z-index: 2;
  min-width: initial;
}
#popupEvent .modal-content {
  border: 0;
  overflow: hidden;
  box-shadow: 0 10px 40px -15px black;
}
.modal-backdrop {
  --bs-backdrop-opacity: 0;
}

/*======== Select ========*/
.select-filter-container {
  /* Colors */
  --color-border-medium: #0e1836;
  --color-text-primary: #1a1a1a;
  --color-focus: var(--color-border-medium); /* focus ring colour */
  --color-hover-bg: #eaebeb;
  --color-focus-bg: #dedfdf;
  --color-selected-bg: #eaebeb;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Spacing */
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --padding-x: 16px;
  --padding-y: 10px;
  --arrow-size: 10px;

  display: flex;
  flex-direction: column;

  select {
    width: 320px;
    max-width: 100%;
    padding: var(--padding-y) var(--padding-x);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;

    background-color: #fff;
    border: 1px solid var(--color-border-medium);
    border-radius: var(--radius-md);

    font: inherit;
    color: var(--color-text-primary);

    &:focus-visible {
      outline: 2px solid var(--color-focus);
      outline-offset: 2px;
    }

    /* Arrow that works in all browsers */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6' stroke='%231a1a1a' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--padding-x) center;
    background-size: var(--arrow-size);
    padding-right: calc(calc(var(--padding-x) * 2) + var(--arrow-size));
  }

  option {
    padding: 12px;
    background-color: #fff;
    color: var(--color-text-primary);

    &:checked {
      background-color: var(--color-selected-bg);
      font-weight: bold;
    }

    &:hover {
      background-color: var(--color-hover-bg);
    }

    &:focus-visible {
      outline: none;
      background-color: var(--color-focus-bg);
    }

    &::checkmark {
      display: none;
    }
  }

  /* Styles for custom select */
  @supports (appearance: base-select) {
    select,
    ::picker(select) {
      appearance: base-select;
    }

    select {
      padding-inline: 12px 16px;

      background-color: #fff;
      border: 1px solid var(--color-border-medium);
      border-radius: var(--radius-md);

      color: var(--color-text-primary);

      &::picker-icon {
        content: "";
      }
    }

    ::picker(select) {
      background-color: #fff;
      border: none;
      border-radius: var(--radius-md);
      box-shadow: 0 6px 6px rgba(0, 0, 0, 0.08);
    }
  }
}

/*======== Ajustes para el modo edicion ========*/
body.editor {
  /* Ajustar elementos uno al lado del otro en los vinculos de resumen */
  .slm-layout-main.groupmarker ul {
    display: flex;
    flex-wrap: wrap;
  }
  .slm-layout-main.groupmarker ul li {
    width: initial;
  }

  /* Mostrar boton para agregar tabs */
  .navbar-pestana-govco .navbar-nav .nav-item.btn-add,
  .navbar-pestana-govco .navbar-nav .nav-link .delete-tab-icon {
    display: block;
  }

  /* Mostrar bloques ocultos */
  .hide-block {
    display: block;
  }
}